<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0,user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>兆千图</title>
    <link rel="stylesheet" href="../../css/api.css">
    <link rel="stylesheet" href="../../css/news.css">
    <!-- <link rel="stylesheet" href="../../css/swiper.css"> -->
    <style>
        .wrap {
            padding-top: 50px;
        }



        .swiper-slide .img {
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .swiper-slide .img img {
            /* width: calc(100vw - 140px); */
            /* height: calc(130vw - 140px); */
            border-radius: 10px;
            box-shadow: 0 1px 5px #000;
            object-fit: cover;
        }

        .swiper-slide-duplicate-active .img img,
        .swiper-slide-active .img img {
            transform: scale(1);
        }

        .swiper-slide-duplicate-active .img-wrap,
        .swiper-slide-active .img-wrap {
            transform: scale(1);
        }

        /* 分享 信息 */
        .img-wrap {
            /* position: relative; */
            transform: scale(0.9);
            /* width: calc(100vw - 140px); */
            /* height: calc(130vw - 140px); */
        }

        .info {
            position: absolute;
            bottom: 0;
            width: 100%;
            box-sizing: border-box;
            padding: 5px;
            display: flex;
            justify-content: space-between;
            align-items: flex-end;
        }

        .info .tx {
            border-radius: 50%;
        }

        .info .tx img {
            width: 50px;
            height: 50px;
            object-fit: cover;
        }

        .info .ewm img {
            width: 100px;
            right: 20px;;
            position: relative;
            margin-right: 20px;
            margin-bottom: 20px;
        }

        /* 二维码 */
        #qrcode {
            visibility: hidden;
            position: fixed;
        }

        /*保存的图片 */
        #show-img {
            position: fixed;
            width: 100vw;
            height: 100vh;
            top: 0;
            left: 0;
            z-index: -1;
        }

        #show-img .container {
            position: relative;
        }

        #show-img .show-imgbg {
            width: 100%;
            height: 100%;
        }

        #show-img .info {
            padding-bottom: 15px;
        }

        .ewm img {
            background: #fff;
        }

        #show-img .ewm img {
            width: 120px;
            height: 100px;
        }

        #ff-footer {
            position: fixed;
            bottom: 0;
            width: 100%;
            background: #fff;

        }

        .footer {
            padding: 20px 0;

        }

        .share-title {
            text-align: center;
            margin-bottom: 20px;
        }

        .share .list {
            display: flex;
            align-items: center;
            flex-direction: column;
            width: 25vw;
        }

        .share img {
            width: 50px;
            margin-bottom: 10px;
        }

        .share .list span {
            font-size: 14px;
        }

        .btn-wrap {
            z-index: 100;
            position: fixed;
            bottom: 0;
            width: 100%;
        }
    </style>
</head>

<body>
    <div class="wrap" id="view" v-cloak>

        <div class="swiper-container" style="margin: 0px auto;">
            <div class="swiper-wrapper">
                <div class="swiper-slide" v-for="(m, index) in lbList">
                    <div class="img-wrap">
                        <div class="img">
                            <img :src="returnImg(m.img)" alt="" style="width: 350px;">
                        </div>
                        <div class="info">
                            <div class="left flex">
                                <div class="tx">

                                </div>
                                <div>
                                    <p class="name"></p>
                                    <p class="name"></p>
                                </div>
                            </div>
                            <div class="ewm">
                                <img :src="ewm" alt="">
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
     <footer id="fx-footer">
            <div class="flex-c">
                <button class="new-submit" onclick="_save()">{{_i18n('保存二维码')}}</button>
            </div>
        </footer>
        <!-- 二维码 -->
        <div id="qrcode"></div>
        <!-- 用以保存的图片 -->
        <div id="show-img">
            <div class="container">
                <img class="show-imgbg" :src="returnImg(sharebg)" alt="">
                <div class="info">
                    <div class="left flex">
                        <div class="tx">
                            <img :src="returnImg(ffInfo.head_portrait)" alt="">
                        </div>
                        <div>
                            <p class="name">{{ffInfo.name}}</p>
                            <p class="name">{{ffInfo.send_code}}</p>
                        </div>
                    </div>
                    <div class="ewm">
                        <img :src="ewm" alt="">
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
<script src="../../script/api.js"></script>
<script src="../../script/jquery.js"></script>
<script src="../../script/ffkj.js"></script>
<script src="../../script/vue.js"></script>
<script src="../../script/swiper.js"></script>
<script src="../../script/qrcode.js"></script>
<script src="../../script/html2canvas.js"></script>
<script src="../../script/img.js"></script>
<script src="../../json/user.js"></script>
<script>
    var view = new Vue({
        el: '#view',
        data: {
            imgurl: imgurl,
            ffList: [],
            ffInfo: {},
            ios: 1, // 1上架 0非上架
            ewm: '',
            share: 0, // 是否显示分享图片
            aindex: 1,
            codeurl: '',
            lbList: [],
            sharebg: '', // 分享的背景图
        },
        methods: {
            _url: function(param, url) {
                _url(param, url);
            },
            // 复制
            copyTxt: function(text) {
                copyTxt(text)
            },
            returnImg(s) {
                return returnImg(s);
            }
        }
    })
    var swiper;
    // test();
    function imgToBase64(url, outputFormat) {
        return new Promise((resolve, reject) => {
            let canvas = document.createElement('canvas');
            const ctx = canvas.getContext('2d');
            const img = new Image;
            img.crossOrigin = 'Anonymous'; //解决Canvas.toDataURL 图片跨域问题
            img.onload = () => {
                let width = img.width;
                let height = img.height;

                // 压缩比例 -- 可以自己修改参数。500px宽度以下原尺寸，大于500px比例处理
                let bili = Math.round(width / 500) || 1;
                let rate = 1 / bili;
                canvas.width = width * rate;
                canvas.height = height * rate;
                ctx.drawImage(img, 0, 0, width, height, 0, 0, width * rate, height * rate);
                let dataURL = canvas.toDataURL(outputFormat || 'image/jpeg');
                // 去除标头 -- 传递给后台时一般去除头部
                // let reg = new RegExp('^data:image/[^;]+;base64,');
                // dataURL = dataURL.replace(reg, '');
                canvas = null;
                resolve(dataURL);
            }
            img.src = url;
        })
    }
    apiready = function() {
        getLunBo();
        view.codeurl = share_url + '/invitation/' + $api.getStorage('userid');

        _getUser(function(ret) {
            view.ffInfo = ret.result;
            imgToBase64(view.ffInfo.head_portrait).then(img=>{
                view.ffInfo.head_portrait = img
            })
        })
        _ajax('api/tool/qrcode', function(ret, err) {
            if (ret && ret.code == 200 && ret.data && ret.data.qr) {
                view.ewm = ret.data.qr;
            }
        }, {
            data: view.codeurl
        })
        // api.imageCache({
        //     url: view.ewm
        // }, function(rets, errs) {
        //     view.ewm = rets.url;
        // });
    }

    // 获取轮播
    function getLunBo() {
        getSlide(5, function(data) {
            view.lbList = data;
             imgToBase64(data[0].img).then(img=>{
                 view.sharebg = img
            })
            // setTimeout(function() {
            //     swiper = new Swiper('.swiper-container', {
            //         loop: true,
            //         slidesPerView: "auto",
            //         slidesOffsetBefore: 70,
            //         spaceBetween: 10,
            //         pagination: {
            //             el: '.swiper-pagination',
            //             clickable: true,
            //         },
            //     });
            // }, 1000)
        })

    }

    // 保存
    function submit(callback) {
        view.share = 1;
        view.$nextTick(()=>{
            canvasToBase('#show-img', function() {
                view.share = 0;
                if (typeof callback == 'function') {
                    callback();
                }
            });
        })

        //
        // api.imageCache({
        //     url: img
        // }, function(rets, errs) {
        //     view.sharebg = rets.url
        //     setTimeout(function() {
        //
        //     }, 500)
        // });

    }

    // vx分享
    function _WX(type) {
        submit(function() {
            _weixin(type);
        })
    }
    // 保存
    function _save() {
        submit(function() {
            savePhotoToAlbum();
        })
    }
</script>

</html>
